<template>
  <div class="userList">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="roleSearch">
      <el-form-item>
        <el-button @click="showAdd" type="primary" icon="plus">添加角色</el-button>
      </el-form-item>
    </el-form>
    <el-table border :data="roleList" stripe style="width: 100%;">
      <el-table-column prop="roleId" width="100" align="center" label="角色ID"></el-table-column>
      <el-table-column prop="roleName" align="center" label="角色名称"></el-table-column>
      <el-table-column align="center" width="245" label="操作">
        <template scope="scope">
          <el-button @click="showRole(scope.row.roleId)" type="primary" size="small">详情</el-button>
          <el-button @click="showUpdatePanel(scope.row.roleId)" type="warning" size="small">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="showRoleInfo" title="角色详情">
      <el-form v-model="role" label-width="120px">
        <el-form-item label="角色名称">
          <el-input v-model="role.roleName" readonly></el-input>
        </el-form-item>
        <el-form-item label="菜单组">
          <el-tree
            :data="menuList"
            ref="detailTree"
            show-checkbox
            node-key="menuId"
            :props="defaultProps">
          </el-tree>
        </el-form-item>
        <el-form-item>
          <template scope="scope">
            <el-button @click="showRoleInfo = false" type="primary">关闭</el-button>
          </template>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-model="showRoleUpdate" title="修改角色">
      <el-form v-model="role" label-width="120px">
        <el-form-item label="角色名称">
          <el-input v-model="role.roleName"></el-input>
        </el-form-item>
        <el-form-item label="菜单组">
          <el-tree
            :data="menuList"
            ref="updateTree"
            show-checkbox
            node-key="menuId"
            :props="defaultProps">
          </el-tree>
        </el-form-item>
        <el-form-item>
          <template scope="scope">
            <el-button type="primary" @click="updateRole">确定</el-button>
          </template>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-model="showAddPanel" title="添加角色">
      <el-form v-model="role" label-width="120px">
        <el-form-item label="角色名称">
          <el-input v-model="role.roleName"></el-input>
        </el-form-item>
        <el-form-item label="菜单组">
          <el-tree
            :data="menuList"
            ref="addTree"
            show-checkbox
            node-key="menuId"
            :props="defaultProps">
          </el-tree>
        </el-form-item>
        <el-form-item>
          <template scope="scope">
            <el-button type="primary" @click="addRole">添加</el-button>
          </template>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "userList",
    data() {
      return {
        roleSearch: {
          name: ''
        },
        roleList: [],//角色列表
        role: {},//当前查看或者修改的角色详情
        showRoleInfo: false,
        showRoleUpdate: false,
        showAddPanel: false,
        menuList: [],//所有菜单数组
        defaultProps: {
          children: "child",
          label: "menuName"
        }
      }
    },
    methods: {
      //查询角色列表
      queryRoleList() {
        var that = this;
        this.$http.get("/getRoleList.shtml", {params: this.roleSearch}).then(data => {
          if (data.code == 200) {
            that.roleList = data.data
          } else {
            that.roleList = []
          }
        })
      },
      //查询菜单列表
      querMenuList() {
        var that = this;
        this.$http.get("/getMenuList.shtml").then(data => {
          console.log(data);
          that.menuList = data.data
        })
      },
      //查询角色详情
      queryRoleInfo(roleId) {
        var that = this
        this.$http.get("/getRoleDetail.shtml", {params: {"roleId": roleId}}).then(data => {
          that.role = data.data
          if (that.showRoleInfo) {
            that.$refs.detailTree.setCheckedNodes(data.data.menuList)
          } else if (that.showRoleUpdate) {
            that.$refs.updateTree.setCheckedNodes(data.data.menuList)
          }
        })
      },
      //显示角色详情面板
      showRole(roleId) {
        this.showRoleInfo = true
        this.queryRoleInfo(roleId)
      },
      //显示修改角色面板
      showUpdatePanel(roleId) {
        this.showRoleUpdate = true
        this.queryRoleInfo(roleId);
      },
      //修改角色信息
      updateRole() {
        var that = this, param = "param=" + JSON.stringify({roleId: this.role.roleId, menuIds: this.$refs.tree.getCheckedKeys(true)})
        this.$http.post("/roleRelationMenu.shtml", param).then(data => {
          if (data.code == 200) {
            that.showRoleUpdate = false
            that.$notify({
              title: '成功',
              message: data.msg || '角色修改成功',
              type: 'success'
            });
          }
        })
      },
      //显示添加面板
      showAdd() {
        this.showAddPanel = true
        var that = this
        setTimeout(function() {
          that.$refs.addTree.setCheckedNodes([])
        });
        this.role = {
          roleName: "",
          menuIdxs: []
        }
      },
      //添加角色
      addRole() {
        this.role.menuIdxs = this.$refs.addTree.getCheckedKeys(true)
        var that = this, param = "param=" + JSON.stringify(this.role)
        this.$http.post("/addRole.shtml", param).then(data => {
          if (data.code == 200) {
            that.showAddPanel = false
            that.$notify({
              title: '成功',
              message: data.msg || '角色添加成功',
              type: 'success'
            });
            that.queryRoleList()
            that.role = {}
          }
        })
      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.queryRoleList()
        vm.querMenuList()
      })
    },
    created() {
      
    }
  }
</script>
<style>
  .user-diaolog .el-dialog {
    width: 500px;
  }
</style>